<template>
  <view :style="`${getOptions?.zIndex ? `z-index: ${getOptions.zIndex}` : ''}`" v-if="getShow">
    <style-fire v-if="skinStore.getClass === 'fire'" :selector="selector"></style-fire>
    <style-water v-else-if="skinStore.getClass === 'water'" :selector="selector"></style-water>
    <style-wind v-else :selector="selector"></style-wind>
  </view>
</template>

<script lang="ts" setup>
  import { useSkinStore } from '@/store/modules/skin';

  import StyleFire from './components/fire/index.vue';
  import StyleWater from './components/water/index.vue';
  import StyleWind from './components/wind/index.vue';
  import { useUpgraderInternal } from './data';
  import { upgradeProps } from './types';

  defineOptions({
    name: 'ea-upgrader',
    options: {
      virtualHost: true,
      addGlobalClass: true,
      styleIsolation: 'shared',
    },
  });
  const props = defineProps(upgradeProps);

  const skinStore = useSkinStore();

  /** 获取应用信息 */
  const getAppInfo = computed(() => props.appInfo);

  const upgrader = useUpgraderInternal(props.selector, getAppInfo);
  const { getShow, getOptions } = upgrader;

  onLoad(async () => {
    if (props.immediate && !getOptions.value.checked) {
      await upgrader.check('none', true);
    }
  });
</script>
